<template>
  <div>
    <el-container>
      <el-header><Header1></Header1></el-header>
      <el-main>

        <div id="title">模型上传</div>

        <div>
          <el-steps :active="3" align-center>
            <el-step title="步骤1" description="提交模型相关信息"></el-step>
            <el-step title="步骤2" description="提交模型使用规范"></el-step>
            <el-step title="步骤3" description="提交模型运行方式"></el-step>
            <el-step title="步骤4" description="提交模型测试用例"></el-step>
          </el-steps>
        </div>
        <el-form ref="form" :model="form" >
        <el-upload
          class="upload-file"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :before-upload="beforeUpload"
          >
          <el-button size="small" type="primary">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传doc/docx/pdf文件，且不超过10M</div>
        </el-upload>
        <!--
          <el-row type="flex" justify="center" >
            <el-col :span="4">
              <el-form-item label="软件功能说明书：">
                <zl-button size="mini" class="upload-file">
                  <input @change="fileUpload" type="file" accept=".pdf,.doc,.docx" ref="uploadFile" v-if="!isUping"/>
                  <p v-if="!isUping">只能上传.pdf,.doc,.docx文件，且不超过10M</p>
                  <cite v-if="isUping" :style="{width:progressWidth+'%'}" >{{progressWidth+"%"}}</cite>
                </zl-button>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item label="软件测试报告：">
                <zl-button size="mini" class="upload-file">
                  <input @change="fileUpload" type="file" accept=".pdf,.doc,.docx" ref="uploadFile" v-if="!isUping"/>
                  <p v-if="!isUping">只能上传.pdf,.doc,.docx文件，且不超过10M</p>
                  <cite v-if="isUping" :style="{width:progressWidth+'%'}" >{{progressWidth+"%"}}</cite>
                </zl-button>
              </el-form-item>
            </el-col>
          </el-row>
-->
      <!--
          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item>
                <el-input
                  type="textarea" 
                  :rows="10"
                  resize="none"
                  placeholder="模型运行方式"
                  v-model="form.textarea2">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
-->
          <el-row type="flex" justify="center">
            <el-col :span="2">
              <el-form-item>
                <el-button round @click="upload2">上一步</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button round disabled>提交</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button round @click="upload4">下一步</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </el-main>
      <el-footer height="120px"><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>

// @ is an alias to /src
import Header1 from "@/components/Header1";
import Footer from "@/components/Footer";


export default {
  name: "upload3",
  components: { Footer, Header1},
  data() {
    return {
      items:[
        Header1
      ],
      form: {
        file: ''
      },
      fileList: [{
        name: '', 
        url: ''
      }]
    }
  },
  methods:{
    upload2(){
      this.$router.push("/upload2")
    },
    upload4(){
      this.$router.push("/upload4")
    },
    beforeUpload(file) {
      console.log(file)
      var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension1 = testmsg === 'doc'
      const extension2 = testmsg === 'docx'
      const extension3 = testmsg === 'pdf'
      const isLt2M = file.size / 1024 / 1024 < 10
      if(!extension1 && !extension2 && !extension3) {
        this.$message({
            message: '上传文件只能是 doc、docx、pdf格式!',
            type: 'warning'
        });
      }
      if(!isLt2M) {
          this.$message({
              message: '上传文件大小不能超过 10MB!',
              type: 'warning'
          });
      }
      return (extension1 || extension2 || extension3) && isLt2M
      // return extension1 || extension2 || extension3
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    // beforeRemove(file, fileList) {
    //   return this.$confirm(`确定移除 ${ file.name }？`);
    // }
    /**
    fileUpload(){
      let m=this
      m.file = m.$refs.uploadFile.files[0]
      let size = m.file.size//文件大小
      //判断上传文件格式
      let arr = m.file.name.split('.')
      let extension = arr[arr.length-1]
      if (m.allowFileExts.indexOf(extension)<0) {
        this.$message.error("文件格式不正确")
        return
      }
      //判断上传文件大小
      if(size/(1024*1024)>10){
        this.$message.error("文件大小不能超过10M")
      }
      let fd = new FormData()
      fd.append('file', m.file)
      fd.append('name', m.file.name)

      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }

      this.$axios.post("user/login/register", fd, config).then(res => {
        alert(res.data.msg)
        if(res.status!="200"){
          alert(res.data.msg)
        }else{
          m.$message.error("上传成功")
          // 触发父组件的自定义事件。
          // m.$emit('importDeviceSuccess')
        }
        setTimeout(()=>{
          m.isUping=false
        },2000)
      },m.isRequest, undefined, true)
    }*/
  }
}
</script>

<style scoped>
/deep/ .el-step__head.is-finish {
  color: #3A62D7;
  border-color: #3A62D7;
}
/deep/ .el-step__title.is-finish {
  color: #3A62D7;
}
/deep/ .el-step__description.is-finish {
  color: #3A62D7;
}

/deep/ .el-input__inner { /*或者 .s2>>>.el-input__inner  */

  border-radius: 20px; /*输入框圆角值*/
  background-color: #ffffff;
  /*background: transparent;*/
}

.el-button {
  background: #3A62D7;
  border: #3A62D7;
  color: #F5F5F5;
}
.el-row {
  margin-top: 30px;
  margin-bottom: 20px;
}

#title {
  color: #333333;
  font-size: 30px;
  font-weight: bold;
  border: #333333;
  margin-top: 50px;
  margin-bottom: 20px;
}

.el-header{
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-footer {
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 3px;

}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 150px;
}

.el-main {
  background-color: #F5F5F5;
  background-size: 100% 100%;
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  height: 800px;
  padding: unset;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>